<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-divider></el-divider>
      <el-row :gutter="20" type="flex">
        <el-col>
          <el-form-item label="标题" prop="title" required>
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="频道名称" prop="channelId" required>
            <el-select v-model="form.channelId" placeholder="请输入频道名称">
              <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" :disabled="item.status == 1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex">
        <el-col>
          <el-form-item label="文章标签" prop="labels">
            <el-input v-model="form.labels" placeholder="请输入标签" />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="文章布局" prop="layout" required>
            <el-radio-group v-model="form.layout" size="medium">
              <el-radio v-for="(item, index) in field101Options" :key="index" :label="item.value" :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入描述信息" />
          </el-form-item> 
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm(addDomain)">保 存</el-button>
      <el-button>取 消</el-button>
    </div>
    <el-form>
      <el-divider>绘本内容</el-divider>
      <el-row :gutter="20" v-for="(domain, index) in domains" :label="'表单项' + (index+1)" :key="domain.key" :prop="'domains.' + index + '.value'"
        type="flex">
        <el-col>
          <el-form-item label="上传" prop="field">
            <el-upload ref="field" :file-list="domain.fieldfileList" :action="fieldAction" multiple :before-upload="fieldBeforeUpload"
              list-type="picture-card" :http-request="fileUpload" :data="domain">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="故事描述:" prop="storageType">
            <el-input v-model="domain.content" placeholder="故事描述"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="内容排序:" prop="ord">
            <el-input v-model="domain.ord" placeholder="请输入排序" number></el-input>
          </el-form-item>
        </el-col>
        <a class="remove-item" v-show="domains.length>1" @click.prevent="removeDomain(domain)"><i class="el-icon-close"></i></a>
      </el-row>
    </el-form>
    <div slot="footer" class="addDomainButton">
      <el-button v-show="open" type="primary" @click="addDomain">添 加 栏 目</el-button>
      <el-button v-show="open" type="primary" @click="submitDomain">提 交 数 据</el-button>
    </div>
  </div>
</template>


<script>
  import {
    listChannel
  } from '@/api/article/channel.js'
  import {
    addArticle,
    updateArticle,
    fileUpload,
    putApMaterial
  } from '@/api/article/article.js'
  export default {
    name: "CreateArticle",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        //文章ID
        articleId: -1,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 文章信息，存储已发布的文章表格数据
        articleList: [],
        // 弹出层标题
        //文件上传地址
        fieldAction: "http://127.0.0.1:8080/upload",
        //文件列表
        fieldfileList: [],
        // 是否打开提交栏目按钮
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        channels: [],
        field101Options: [{
          "label": "图文",
          "value": 1
        }, {
          "label": "视频",
          "value": 2
        }],
        storageTypes: [{
          "label": "阿里云",
          "value": 0
        }, {
          "label": "七牛云",
          "value": 1
        }, {
          "label": "腾讯云",
          "value": 2
        }],
        //动态创建form表单数组
        domains: [],
      }
    },

    created() {
      this.getChannels()
    },
    methods: {
      submitDomain() {
        putApMaterial(this.domains).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.msgSuccess("素材成功");
            this.reset();
          }
        })
      },
      //数据重置
      reset() {
        this.open = false,
          this.articleId = -1,
          this.domains = [],
          this.form = {
            title: " ",
            layout: 1
          }
      },
      //添加元素
      addDomain() {
        this.open = true;
        this.domains.push({
          "fieldfileList": [],
          "ord": this.domains.length + 1,
          "content": "",
          "url": "",
          "articleId": this.articleId
        });
      },
      //移除列表中元素
      removeDomain(item) {
        var index = this.domains.indexOf(item)
        if (index !== -1) {
          this.domains.splice(index, 1)
        }
      },
      getChannels() {
        listChannel().then((response) => {
          this.channels = response.rows
        });
      },
      fieldBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      fileUpload(param) {
        fileUpload(param).then(res => {
          param.data.url = res.msg
        })
      },
      /** 提交按钮 */
      submitForm(callback) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateArticle(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addArticle(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.articleId = response.data.id
                  callback();
                }
              });
            }
          }
        });
      }
    }
  }
</script>

<style>
  .row {
    text-align: center;
  }

  .dialog-footer {
    text-align: right;
  }

  .addDomainButton {
    text-align: center;
  }
</style>
